<template>
    <div>
    <div id="loading1">
        <div class="demo1"></div>
        <div class="demo1"></div>
        <div class="demo1"></div>
        <div class="demo1"></div>
        <div class="demo1"></div>
        <!-- <br/> -->
        <p class="LoadingP fonts fontCfff">拼命加载中...</p>
    </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
    }
  },
  methods: {
  }
}

</script>

<style scoped>
.LoadingP {
    width: 100%;
    clear: both;
    padding-top: 0.4rem;
}
#loading1 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.4);
    padding: 0.7rem;
    border-radius: 0.2rem;
}
.demo1 {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: #fff;
    float: left;
    margin: 0 8px;
    animation: demo1 linear 1s infinite;
    -webkit-animation: demo1 linear 1s infinite;
}
.demo1:nth-child(1){
    animation-delay:0s;
}
.demo1:nth-child(2){
    animation-delay:0.15s;
}
.demo1:nth-child(3){
    animation-delay:0.3s;
}
.demo1:nth-child(4){
    animation-delay:0.45s;
}
.demo1:nth-child(5){
    animation-delay:0.6s;
}
@keyframes demo1
{
    0%,60%,100% {transform: scale(1);}
    30% {transform: scale(2.5);}
}
@-webkit-keyframes demo1
{
    0%,60%,100% {transform: scale(1);}
    30% {transform: scale(2.5);}
}
</style>
